<template>
  <div class="base-panels">
    <Row type="flex">
      <Col flex="800px"> <h2 class="title2">项目大事记</h2></Col>
    </Row>

    <ul class="tra" >
      <li v-for="item in finish">
        <span>{{ parseTime(item?.finishDate) }}</span>
        <span>竣工验收备案</span>
        <dl class="describe">
          <dd class="w100">竣工备案编码：{{ item?.finishCode }}</dd>

          <template  v-for="itemSingle in item?.singleData">
            <dd>单位工程编码：{{ itemSingle?.singleCode }}</dd>
            <dd>单位工程名称：{{ itemSingle?.singleName }}</dd>
          </template>



        </dl>
      </li>

      <li v-for="item in permit">
        <span>{{ parseTime(item?.issueDate) }}</span>
        <span>施工许可证</span>
        <dl class="describe">
          <dd class="w100">工程名称：{{ item?.engineering }}</dd>
          <dd>施工许可证编号：{{ item?.permitCode }}</dd>
          <dd>发证机关：{{ item?.issueAuthority }}</dd>
        </dl>
      </li>

      <li v-for="item in contract">
        <span>{{ parseTime(item?.contractDate) }}</span>
        <span>合同登记</span>
        <dl class="describe">
          <dd>业务类别：{{ item?.activityType }}</dd>
          <dd>承接单位：{{ item?.takeCorp }}</dd>
          <dd class="w100">承接资质：{{ item?.corpQual }}</dd>
        </dl>
      </li>

      <li>
        <span>{{parseTime(building?.createTime)}}</span>
        <span>建档</span>
        <dl class="describe">
          <dd class="w100">建设单位：{{ building?.buildCorp }}</dd>
        </dl>
      </li>

      <li>
        <span></span>
        <span>立项</span>
        <dl class="describe">
          <dd class="w100">项目名称：{{ building?.prjName }}</dd>
          <dd class="w100">立项赋码：{{ building?.assignCode }}</dd>
        </dl>
      </li>
    </ul>

  </div>

</template>

<script lang="ts">
import {defineComponent, inject, onMounted, reactive , toRefs} from 'vue';
import {Row, Col, Table, Input, Button } from 'ant-design-vue';
import { parseTime } from '/@/utils';
import { getMemorabiliaApi } from "/@/api/pro";

export default defineComponent({
  components: {
    Table , Row, Col, Input, Button
  },
  setup() {
    const projectId = inject('projectId') as string;

    const detail = reactive<any>({
      building:{},
      contract:[],
      finish:[],
      permit:[]
    })

    const changeHandler = () => {

      let { building , contract ,finish ,permit } = toRefs(detail);
      getMemorabiliaApi( { projectId }).then( result => {
         if(result.success){
           const res = result.data;
           building.value = res.building;
           contract.value = res.contract;
           finish.value = res.finish;
           permit.value = res.permit;
           //console.log(src);
         }
      })
    }

    const init = () => {
      changeHandler();
    }

    onMounted(init)

    return {
      ...toRefs(detail), changeHandler , parseTime
    }
  },
})
</script>

<style lang="less" scoped>

.title2{
  padding-top: 22px !important;
}

.tra{
  padding: 20px 0 40px;

  >li{
    position: relative;

    span{
      display: inline-block;
      vertical-align: top;

      &:first-child{
        width: 98px;
        margin-right: 20px;
        font-size: 16px;
        font-weight: bold;
      }

      &:nth-child(2){
        max-width: 300px;
        font-size: 16px;
        font-weight: bold;
      }
    }

    .describe{
      padding: 10px 0 30px 118px;

      dd{
        display: inline-block;
        width: 400px;
        margin-bottom: 5px;

        &.w100{
          width: 100%;
        }
      }
    }

    &::before{
      position: absolute;
      top: 10px;
      left: 98px;
      display: inline-block;
      width: 7px;
      height: 7px;
      background: #D8D8D8;
      border-radius: 50%;
      content: '';
    }

    &::after{
      position: absolute;
      top: 17px;
      left: 101px;
      display: inline-block;
      width: 1px;
      height: calc(100% + 5px);
      background: #EDEFF2;
      content: '';
    }

    &:last-child::after{
      display: none;
    }
  }

}

</style>
